<!--
 * @Descripttion: 中国-省份地图
 * @Author: whl
 * @Date: 2022-06-27 16:03:58
 * @LastEditors: whl
 * @LastEditTime: 2023-04-03 15:05:35
-->
<template>
  <div>
    <h3 style="text-align: center;">{{$route.query.name}}</h3>
    <div id='china-map' style='height: 587px; width: 700px;margin: auto;'></div>
  </div>
</template>
<script>
import chinnaMapMixin from '@/js/chinaMapMixin'
import {httpGet} from '@/js/api/baseApi'
export default {
  mixins: [chinnaMapMixin],
  data () {
    return {
    }
  },
  async mounted () {
    let queryName = this.$route.query.name
    let url = window.location.origin + `/static/china-map/${queryName}.json`
    let provinceCenter = await httpGet(`/static/china-map/province_center.json`)
    const center = provinceCenter[queryName]
    const tooltip = {
      show: true,
      trigger: 'item',
      formatter: function (params) {
        console.log(params)
        let html = `<div class="m-tooltip-wrap">
        <p>地区名称： ${params.name} </p>
        <p>温度： 20摄氏度 </p> 
        </div>`
        return html
      }
    }
    let zoom = 2.15 // 默认放大倍数
    let top = '0'
    if (['北京', '上海', '天津', '澳门特区', '香港特区'].includes(queryName)) {
      zoom = 10
      top = '30'
    }
    if (queryName === '内蒙古区') {
      zoom = 1.5
    }
    let option = this.constructorOption({
      data: [],
      zoom,
      top,
      center,
      tooltip // tooltip可以自定义
    })
    this.provinceInit({url, option})
  },
  methods: {
  }
}
</script>

<style lang='scss'>
</style>
